<template>
	<div id="console" class="console" ref="root" :style="coord" v-show="show"
		draggable="true" 
		@dragstart.stop="handleDrag($event)" 
		@drag.stop="handleDrag($event)" 
		@dragend.stop="handleDrag($event)"
		@contextmenu.prevent.stop>
		<SimpleConsole v-show=" 'simple' == showType "/>
		<CompleteConsole v-show=" 'complete' == showType "/>
	</div>
<!-- 	<VueDragResize :isActive="true" :parentLimitation="true" :w="400" :h="360">
		
	</VueDragResize> -->

</template>
<script>
	import VueDragResize from 'vue-drag-resize';
	import SimpleConsole from './components/simple.vue';
	import CompleteConsole from './components/complete.vue';
	export default {
		name: 'Console',
		
		components: {
			SimpleConsole,
			CompleteConsole,
			VueDragResize
		},

		data: function(){
			return {
				show: false,
				showType: 'none',
				dragStart: null,
				coord: {
					x: 0, 
					y: 0
				}

			};

		},

		methods: {
			handleDrag: function(event){
				// console.log(event);
				let self = this;
				if('dragstart' == event.type){
					self.dragStart = {x: event.x, y: event.y};
					return;
				}
				if('dragend' == event.type){
					let dragStart = self.dragStart;
					let dragDelta = {x: event.x - dragStart.x, y: event.y - dragStart.y};
					let coord = {top: self.coord.top + dragDelta.y, left: self.coord.left + dragDelta.x};
					self.coord = coord;
					self.$refs.root.style.top = self.coord.top + 'px';
					self.$refs.root.style.left = self.coord.left + 'px';
					return;
				}

			},

			handleConsoleEvt: function(evtMsg){
				let self = this;
				let menu = evtMsg.menu;
				let element = evtMsg.element;
				let event = evtMsg.event;
				if('configScrapeData' != menu.name && 'openConsole' != menu.name){
					self.show = false;
					return;
				}
				if(null != event){				
					self.coord = {top: event.y, left: event.x};
					self.$refs.root.style.top = self.coord.top + 'px';
					self.$refs.root.style.left = self.coord.left + 'px';
				}
				let nowType = self.showType;
				let consoleType = 'configScrapeData' == menu.name ? 'simple' : 'complete';
				let shouldShowType = nowType == 'complete' || consoleType == 'complete' ? 'complete' : 'simple';
				let {...showConsoleMsg} = evtMsg;
				showConsoleMsg.showType = shouldShowType;
				self.$nextTick(() => {
					self.$bus.$emit('show-console-type', showConsoleMsg);
					self.showType = shouldShowType;
					self.show = true;
				});

			}
		
		},

		mounted: function(){
			let self = this;
			self.$bus.$on('menu-event', evtMsg => {self.handleConsoleEvt(evtMsg)});

		}
	
	}
</script>
<style scoped>
	.console{
		position: fixed;
		z-index: calc(var(--base-layer) + 2);
	}
	.console>div{
		background: #2196f3;
	    padding: 5px 10px;
	    color: white;	
	}
</style>